<template>
  <x-form ref="formRef" v-model:model="form" :rules="rules" label-placement="top">
    <n-form-item label="创意名称：" path="name">
      <n-input
        v-model:value="form.name"
        placeholder="请输入创意名称"
        maxlength="60"
        :show-count="true"
        @change="onChange"
      />
    </n-form-item>
  </x-form>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router'
  import XForm from '@/components/x-form/index.vue'
  import { NFormItem, NInput, useMessage } from 'naive-ui'
  import { onMounted, reactive, ref } from 'vue'
  const route = useRoute()
  const message = useMessage()
  const emit = defineEmits(['update:value'])
  const props = defineProps({
    value: {
      type: String,
      default: ''
    }
  })
  const getProps = reactive(props)
  const form = ref({
    name: ''
  })
  const rules = ref({
    name: [
      { required: true, message: '创意名称不能为空', trigger: 'blur' },
      { message: '创意名称过长', max: 60, trigger: 'blur' }
    ]
  })
  const formRef = ref(null)
  onMounted(() => {
    form.value.name = getProps.value
  })
  /*
   * 表单数据校验
   * */
  function validate() {
    return new Promise((resolve, reject) => {
      formRef.value.validate((errors) => {
        if (!errors) {
          return resolve(true)
        }
        message.warning('创意名称表单数据校验未通过~')
        reject()
        console.warn('创意名称表单数据校验未通过~')
      })
    })
  }
  function onChange(value) {
    emit('update:value', value)
  }
  defineExpose({
    validate
  })
</script>

<style scoped lang="scss"></style>
